<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历操作</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            // 页面加载时初始化一个值
            let i = 1;
            $("#more").click(function () {
                let d = $("#d").clone(true);
                d.attr("id", "d" + i);
                $(this).before(d);
                // 将新增区域的文件选择器的值清除
                $("#d" + i + " input").val("");
                i++;
            });
            $("a").click(function () {
                if ($(this).parent().attr("id") != "d") {
                    $(this).parent().remove();
                }
            });
            $("#print").click(function(){
                // 直接输出时只显示第一个元素
                // 因此,此时需要通过遍历的方式打印出所有元素
                // console.log($("input[type='file']").val())
                // 遍历语法:jquery对象.each(fn)
                // fn函数可以无参
                console.log("----------------无参----------------")
                $("input[type='file']").each(function(){
                    // 如果无参,可以通过this关键字表示当前迭代的元素
                    // this是一个DOM对象
                    console.log($(this).val())
                })
                console.log("----------------一个参数----------------")
                // fn可以有参数,当只有一个参数的时候,该参数表示当前迭代的元素的索引号
                $("input[type='file']").each(function(i){
                    // 如果无参,可以通过this关键字表示当前迭代的元素
                    // this是一个DOM对象
                    console.log("索引号为:"+i+",元素为:"+$(this).val())
                })
                console.log("----------------两个参数----------------")
                // 参数一:索引号
                // 参数二:当前迭代的对象,这是一个DOM对象
                $("input[type='file']").each(function(i,e){
                    // 如果无参,可以通过this关键字表示当前迭代的元素
                    // this是一个DOM对象
                    console.log("索引号为:"+i+",元素为:"+$(e).val())
                })
            });
        })
    </script>
</head>
<body>
<div id="d">
    <input type="file">
    <a href="javascript:;">删除</a>
</div>
<button id="more">上传更多</button>
<button id="print">打印文件名</button>
</body>
</html>